<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/yue.css" />
		<link rel="stylesheet" href="js/1.0.8/iconfont.css" />
		<link rel="stylesheet" href="css/zhishi.css" />
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div class="tou">
			<div><a href="../wode/wode.html" style="text-decoration: none;"><i class="Hui-iconfont">&#xe67d</i></a></div>
			<div class="dd-div">
				<div class="ding-dan">余额</div>
			</div>
		</div>
		<div class="congz">
			<div class="zhongzuo-div">
				<div class="dqyue">当前余额</div>
				<div class="maney"><span v-html="oldmoney" style="font-size: 2rem;">0.00</span>元<span><input v-model="money" class="c-jine" type="text" placeholder="请输入充值金额"></span></div>
				<div class="button" @click="click">充值</div>
			</div>
		</div>
		<div class="congz-xinxi"></div>
		<div class="biaodan">
			<!--vue-->
			<div class="mingx">
				<div class="mingxi">交易明细</div>
				<div class="m-biaodan">
					<div class="time">时间</div>
					<div class="c-money">金额</div>
					<div class="c-money" @click="remove($index)">清除记录</div>
				</div>
				<div class="m-biaodan" v-for="lists in listt">
					<div class="c-money" v-html="lists.time" style="color: #AAAAAA;"></div>
					<div class="c-money" v-html="lists.pase" style="color: #AAAAAA;"></div>
					<div class="c-money" style="color: #AAAAAA;"></div>
				</div>
				
			</div>
			<div class="img">
		
				<div class="img-1" v-show="listt.length==0">
					<img src="img/wujiaoyi.png">
				</div>
			</div>
		</div>
		<script>
			var vue = new Vue({
				el: 'body',
				data: {
					oldmoney:"0.00",
					money:"",
					jilu:"",
					listt: [{
						
					}],
				},
				methods:{
					remove:function(rem){
						this.listt.splice(rem)
					},
					click:function(){
						this.listt.push({
							time:new Date().toLocaleString(),
							pase:this.money
						});
						this.oldmoney=this.money;
					}
				}
			})
			
			
		</script>
	</body>

</html>